<template>
	<view class="content">
		<uni-nav-bar title="缴费" backgroundColor="#090" left-icon="left" left-text="返回" color="#fff" right-icon="list"
			@clickLeft="back" @clickRight="jump('/pages/feeRecord/feeRecord')" class="nav-bar">
		</uni-nav-bar>
		<!-- 缴费金额 -->
		<uni-list class="list-amount">
			<uni-list-item :title="type |feeType" :thumb="type |feeTypeIcon" thumb-size="lg">
				<template v-slot:footer>
					<view class="footer-amount">
						<input type="digit" placeholder="请输入缴费金额" v-model="amount" />
						<text>元</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 缴费详情 -->
		<uni-list class="list-details">
			<uni-list-item title="缴费单位" :right-text="curCollector ===-1?'请选择':collectors[curCollector].cname"
				:showArrow="true" :clickable="true" @click="$refs.popup.open()"></uni-list-item>
			<uni-list-item title="用户编号" class="user-num">
				<template v-slot:footer>
					<input placeholder="请输入用户的编号" class="num" @input="doUserIdChange" v-model="userId" />
				</template>
			</uni-list-item>
			<uni-list-item title="户名" :rightText="household.householdName"></uni-list-item>
			<uni-list-item title="用户地址" :rightText="household.householdAddr"></uni-list-item>
		</uni-list>
		<!-- 提交按钮 -->
		<button class="submit" @click="submit" :disabled="isClick">立即缴费</button>
		<!-- 弹出层（缴费单列表） -->
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="popup-content">
				<!-- 头 -->
				<view class="popup-header">
					<text>缴费单位</text>
				</view>
				<!-- 主题 -->
				<view class="popup-body">
					<radio-group class="radio-group" @change="handleChange">
						<label class="radio-item" v-for="(item,index) in collectors" :key="item.cid">
							<text>{{item.cname}}</text>
							<radio :value="String(index)" :checked="curCollector==index" />
						</label>

					</radio-group>
				</view>
				<!-- 底部 -->
				<view class="popup-footer">
					<button @click="$refs.popup.close()">取消</button>
					<button @click="chooseCollector">确定</button>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		feeAdd,
		feeCollector,
		householdQuery
	} from '../../service'

	export default {
		data() {
			return {
				type: '1', //用于保持传递的缴费类型
				amount: 0, //缴费金额
				collectors: [], //缴费单位
				tempCollector: -1, //临时选中的缴费单位的下标
				curCollector: -1, //最终选中的缴费单位的下标
				timer: null, //用户保存开启的定时器
				userId: '', //用户的编号
				household: {}, // 业主信息
				isClick: false, //提交按钮
			}
		},
		async onLoad({
			type
		}) {
			this.type = type
			const data = await feeCollector(this.type)
			this.collectors = data
		},
		methods: {
			//立即缴费
			async submit() {
				let type = this.type
				if (type < 1 || type > 6) {
					return this.$toast('类型不存在')
				}
				if (!this.collectors[this.curCollector]) {
					return this.$toast('缴费单位不能为空')
				}
				let collectorId = this.collectors[this.curCollector].cid

				let householdId = this.userId
				if (!this.userId || !this.household.householdName) {
					return this.$toast('业主编号错误')
				}
				let amount = this.amount
				if (amount <= 0) {
					return this.$toast('缴费金额不能是负数')
				}
				//请求接口
				const data = await feeAdd(type, collectorId, householdId, amount)
				if (data.code === 2000) {
					this.$toast('缴费成功')
					this.isClick = true
				} else {
					this.$toast('缴费失败')
				}
			},
			//监听用户的输入的编码编号
			doUserIdChange(event) {
				//如果输入新的内容触发，判断是否已经开启了定时器，则进行防抖处理，清除定时器
				if (this.timer) {
					clearTimeout(this.timer)
					this.timer = null
				}
				this.timer = setTimeout(async () => {
					const data = await householdQuery(event.detail.value)
					console.log(data);
					if (data.code === 2000) {
						this.household = data.msg
					} else {
						// uni.showToast({
						// 	title: '业主编号不存在',
						// 	icon: 'none',
						// 	duration: 3000
						// })
						this.$toast('该用户不存在')
						this.household.householdName = ''
						this.household.householdAddr = ''
					}
				}, 2000)

			},
			back() {
				uni.navigateBack()
			},
			jump(url) {
				uni.navigateTo({
					url,
				})
			},
			// 单选框的切换
			handleChange(event) {
				console.log(event.detail.value);
				this.tempCollector = event.detail.value;
			},
			//监听弹出层确定按钮
			chooseCollector() {
				//保存选择公司的下标
				this.curCollector = this.tempCollector
				console.log(this.curCollector);
				console.log(this.collectors);
				//关闭弹出层
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		display: block;

		::v-deep .uni-navbar__content {
			display: block;
		}
	}

	// 缴费金额
	.list-amount {
		margin-top: $uni-spacing-col-base;

		.footer-amount {
			align-items: center;

			input {
				font-size: $uni-font-size-base;
				width: 8em;
				text-align: right;
			}
		}
	}

	//缴费详情
	.list-details {
		margin-top: $uni-spacing-col-base;

		.user-num {

			.num {
				font-size: $uni-font-size-base;
				text-align: right;
			}
		}
	}

	.submit {
		background-color: $zh-theme-color;
		color: $zh-theme-color-inverse;
		font-size: $uni-font-size-base;
		width: 90%;
		margin-top: $uni-spacing-col-lg*3;

		&:active {
			background-color: darken($zh-theme-color, 5%);
		}
	}

	// 弹出层
	.popup-content {
		width: 600rpx;
		background-color: $uni-bg-color;
		flex-direction: column;

		.popup-header {
			background-color: $zh-theme-color;
			color: $zh-theme-color-inverse;
			justify-content: center;
			padding: $uni-spacing-col-base 0;
			font-size: $uni-font-size-lg;

		}

		.popup-body {
			margin-top: $uni-spacing-col-base;
			margin-bottom: $uni-spacing-col-base ;

			.radio-group {
				display: flex;
				flex-direction: column;
				width: 100%;

				.radio-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: $uni-spacing-col-base $uni-spacing-row-base;

					text {
						font-size: $uni-font-size-base;
					}
				}
			}

		}

		.popup-footer {
			padding: $uni-spacing-col-base 0;

			button {
				font-size: $uni-font-size-base;
			}
		}
	}
</style>